<!-- @desc [首页Footer] -->

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="leftBox">
          <div class="borderBox">
            <p class="orangeBorder"></p>
            <p>入库统计</p>
          </div>
          <div class="content">
            <div ref="libraryStatistics" class="wh"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="righttBox">
          <div class="borderBox">
            <p class="orangeBorder"></p>
            <p>出库统计</p>
          </div>
          <div class="content">
            <div ref="outboundStatistics" class="wh"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { homeBarData, homeLineData } from '@/api/basicInfo'

export default {
  name: 'Footer',
  data() {
    return {
      options1: {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: [] },
        xAxis: [{ type: 'category', axisTick: { show: false }, data: [] }],
        yAxis: [{ type: 'value' }],
        series: []
      },
      options2: {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { data: [] },
        xAxis: [{ type: 'category', axisTick: { show: false }, data: [] }],
        yAxis: [{ type: 'value' }],
        series: []
      }
    }
  },
  mounted() {
    this.basicLineChart()
    this.$eventBus.$on('refreshLineChart', () => {
      this.basicLineChart('resize')
    })
  },
  methods: {
    basicLineChart(resize) {
      // 入库统计
      homeBarData().then((res) => {
        this.initEcharts(res.data, 'options1', 'libraryStatistics', resize)
      })
      // 出库统计
      homeLineData().then((res) => {
        this.initEcharts(res.data, 'options2', 'outboundStatistics', resize)
      })
    },
    initEcharts(data, opt, dom, resize) {
      let type = opt === 'options1' ? 'bar' : 'line'
      data.forEach((item) => {
        this[opt].legend.data.push(item.name)
        this[opt].xAxis[0].data = item.dateList
        this[opt].series.push({ name: item.name, type: type, data: item.dataList })
      })
      const __DOM__ = this.$echarts.init(this.$refs[dom])
      resize && __DOM__.clear()
      __DOM__.setOption(this[opt])
    }
    // 一维数组转二维数组
    /*_1DTo2D(dateArr) {
        let len = dateArr.length,
          n = 1,
          lineNum = len % n === 0 ? len / n : Math.floor((len / n) + 1),
          result = []
        for (let i = 0; i < lineNum; i++) {
          let temp = dateArr.slice(i * n, i * n + n)
          result.push(temp)
        }
        return result
      }*/
  }
}
</script>

<style scoped>
.borderBox {
  display: flex;
  line-height: 16px;
}

.orangeBorder {
  height: 16px;
  width: 5px;
  margin-right: 5px;
  background-color: #ff7f21;
}

.content {
  height: 300px;
  line-height: 300px;
  background-color: #fff;
}

.wh {
  width: 100%;
  height: 330px;
}

.container {
  margin-bottom: 20px;
}
</style>
